<div class="main-container">
  <div class="row">
    <div fGrid="6" class="free-demo-board">
      <p>
        {{'DEMO.CALENDAR.DESCRIPTION' | translate}}
      </p>
      <hr>
      <h3 class="free-head-title">{{'API-OPTION' | translate}}<span class="symbol component"></span></h3>

      <div class="free-demo-row">
        <h3 class="free-title">free-calendar</h3>
        <p>{{'COMPONENT.CALENDAR' | translate}}</p>
        <free-table>
          <free-table-header>
            <free-table-row>
              <free-table-head><ng-template>{{'PROPERTY' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'TYPE' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'DESCRIPTION' | translate}}</ng-template></free-table-head>
            </free-table-row>
          </free-table-header>

          <free-table-body>
            <free-table-row>
              <free-table-cell>defaultDate</free-table-cell>
              <free-table-cell>
                <ng-template><code>String</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.CALENDAR.OPTION.0' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>minDate</free-table-cell>
              <free-table-cell>
                <ng-template><code>String</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.CALENDAR.OPTION.1' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>maxDate</free-table-cell>
              <free-table-cell>
                <ng-template><code>String</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.CALENDAR.OPTION.2' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>firstDayOfWeek</free-table-cell>
              <free-table-cell>
                <ng-template><code>String</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.CALENDAR.OPTION.3' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>lang</free-table-cell>
              <free-table-cell>
                <ng-template><code>String</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.CALENDAR.OPTION.4' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>format</free-table-cell>
              <free-table-cell>
                <ng-template><code>String</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.CALENDAR.OPTION.5' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>hourFormat</free-table-cell>
              <free-table-cell>
                <ng-template><code>String</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.CALENDAR.OPTION.6' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>pholder</free-table-cell>
              <free-table-cell>
                <ng-template><code>String</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.CALENDAR.OPTION.7' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>readonly</free-table-cell>
              <free-table-cell>
                <ng-template><code>String</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.CALENDAR.OPTION.8' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>showTime</free-table-cell>
              <free-table-cell>
                <ng-template><code>String</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.CALENDAR.OPTION.9' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>inline</free-table-cell>
              <free-table-cell>
                <ng-template><code>String</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.CALENDAR.OPTION.10' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>width</free-table-cell>
              <free-table-cell>
                <ng-template><code>number</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.CALENDAR.OPTION.11' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>timeOnly</free-table-cell>
              <free-table-cell>
                <ng-template><code>Boolean</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.CALENDAR.OPTION.12' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>dateView</free-table-cell>
              <free-table-cell>
                <ng-template><code>string</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.CALENDAR.OPTION.13' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
          </free-table-body>
        </free-table>
      </div>
      <div class="free-demo-row">
        <h3 class="free-title">{{'EVENT' | translate}}</h3>
        <free-table>
          <free-table-header>
            <free-table-row>
              <free-table-head><ng-template>{{'EVENT' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'TYPE' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'DESCRIPTION' | translate}}</ng-template></free-table-head>
            </free-table-row>
          </free-table-header>

          <free-table-body>
            <free-table-row>
              <free-table-cell>onChange</free-table-cell>
              <free-table-cell>
                <ng-template><code>Function</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.CALENDAR.EVENTS.0' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
          </free-table-body>
        </free-table>
      </div>
    </div>

    <div class="free-demo-board" fGrid="6">
      <div class="free-card-board">
        <h3 class="free-toolbar">Import</h3>
        <free-tab-group direction="right" theme="line">
          <free-tab header="CODE">
            <free-code lang="typescript">
              import &#123;CalendarModule&#125; from 'freeng/freeng';
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Default</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <div style="height: 400px">
              <free-calendar></free-calendar>
            </div>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-calendar&gt;&lt;/free-calendar&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">DefaultDate</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <div style="height: 400px">
              <free-calendar [defaultDate]="defaultDate"></free-calendar>
            </div>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-calendar [defaultDate]="defaultDate"&gt;&lt;/free-calendar&gt;
            </free-code>
            <h4>Javascript</h4>
            <free-code lang="javascript">
              this.defaultDate = '2015/10/11';
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">View</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <div style="height: 400px">
              <free-calendar dateView="y"></free-calendar>
              <free-calendar dateView="ym"></free-calendar>
              <free-calendar dateView="m"></free-calendar>
            </div>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-calendar dateView="y"&gt;&lt;/free-calendar&gt;
              &lt;free-calendar dateView="ym"&gt;&lt;/free-calendar&gt;
              &lt;free-calendar dateView="m"&gt;&lt;/free-calendar&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">minDate and maxDate</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <div style="height: 400px; display: flex;">
              <span>range：</span>
              <free-calendar [(ngModel)]="minDate" [maxDate]="maxDate"></free-calendar>
              <span> - </span>
              <free-calendar [(ngModel)]="maxDate" [minDate]="minDate"></free-calendar>
            </div>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;span&gt;range：&lt;/span&gt;
              &lt;free-calendar [(ngModel)]="minDate" [maxDate]="maxDate"&gt;&lt;/free-calendar&gt;
              &lt;span&gt; - &lt;/span&gt;
              &lt;free-calendar [(ngModel)]="maxDate" [minDate]="minDate"&gt;&lt;/free-calendar&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Disabled</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <div style="height: 400px; display: flex;">
              <free-calendar [readonly]="true"></free-calendar>
            </div>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-calendar [readonly]="true"&gt;&lt;/free-calendar&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">ShowTime</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <div style="height: 400px;">
              <p style="margin-bottom: 1rem;">
                <free-calendar [showTime]="true"></free-calendar>
              </p>
              <free-calendar [showTime]="true" [defaultDate]="'2014-10-11 20:10:10'"></free-calendar>
            </div>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-calendar [showTime]="true"&gt;&lt;/free-calendar&gt;
              &lt;free-calendar [showTime]="true" [defaultDate]="'2014-10-11 20:10:10'"&gt;&lt;/free-calendar&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">CN</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <div style="height: 400px">
              <free-calendar lang="cn"></free-calendar>
            </div>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-calendar lang="cn"&gt;&lt;/free-calendar&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Inline</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <div style="height: 400px">
              <free-calendar [inline]="true" style="width: 100%;"></free-calendar>
            </div>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-calendar [inline]="true"&gt;&lt;/free-calendar&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">ShowTime</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <div style="height: 400px;">
              <free-calendar [timeOnly]="true"></free-calendar>
              <free-calendar [timeOnly]="true" [defaultDate]="'20:10:10'"></free-calendar>
            </div>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-calendar [timeOnly]="true"&gt;&lt;/free-calendar&gt;
              &lt;free-calendar [timeOnly]="true" [defaultDate]="'20:10:10'"&gt;&lt;/free-calendar&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>
    </div>
  </div>

  <blockquote>FreeNG - {{'MOTTO' | translate}}</blockquote>
</div>
